{% extends "_layouts/examples.html" %}
{% block title %}Tooltips{% endblock %}

{% block standalone_css %}patterns_tooltips{% endblock %}

{% block content %}
<button class="p-tooltip" aria-describedby="default-tooltip">
  Bottom left
  <span class="p-tooltip__message" role="tooltip" id="default-tooltip">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--btm-center" aria-describedby="btm-cntr">
  Bottom center
  <span class="p-tooltip__message" role="tooltip" id="btm-cntr">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--btm-right" aria-describedby="btm-rgt">
  Bottom right
  <span class="p-tooltip__message" role="tooltip" id="btm-rgt">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--left" aria-describedby="left">
  Left
  <span class="p-tooltip__message" role="tooltip" id="left">Product name to be displayed on the storefront.</span>
</button>
<br />
<br />
<button class="p-tooltip--right" aria-describedby="rght">
  Right
  <span class="p-tooltip__message" role="tooltip" id="rght">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--top-left" aria-describedby="tp-lft">
  Top left
  <span class="p-tooltip__message" role="tooltip" id="tp-lft">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--top-center" aria-describedby="tp-cntr">
  Top center
  <span class="p-tooltip__message" role="tooltip" id="tp-cntr">Product name to be displayed on the storefront.</span>
</button>
<button class="p-tooltip--top-right" aria-describedby="tp-rght">
  Top right
  <span class="p-tooltip__message" role="tooltip" id="tp-rght">Product name to be displayed on the storefront.</span>
</button>
{% endblock %}
